<template>
	<div style="width: 100%;">
		<div style="display: flex; width: 100%;">
			<el-link style="width: 7%;" @click="gotype()"> 返回类型管理</el-link>
			<div style="width: 100%;"><p style="text-align: center;">{{data.a}}</p></div>
		</div>
		<div style="background-color: #E1337F;height: 0.1rem;"></div>
	<el-card >
		<div style="width: 100%;">
			<div style="display: flex;">
			<div style="margin-top: 10rem;margin-left: 25rem;">
				<el-image v-if="data.type.typeid!=0" style="width: 10rem;height: 10rem;"
					:src="$ip+`/public/shows/`+data.type.pic" />
			</div>
			<div>
			<el-main>
				<h2 style="text-align: center;">{{data.a}}</h2>
				<div style="margin-left: 15rem;">
				<el-form :model="data.type" :rules="rules" ref="formRef">
					<el-form-item  label="编号:" prop="typeid">
					      <el-input v-model="data.type.typeid" placeholder="编号" :prefix-icon="Cellphone" style="width: 16rem;" disabled=""/>
					    </el-form-item>
					<el-form-item label="名称:" prop="typename">
						<el-input v-model="data.type.typename" placeholder="名称" :prefix-icon="Cellphone" style="width: 16rem;"></el-input>
					</el-form-item>
					<el-form-item label="品种类型:" prop="breed.breedid" >
					
						<el-select v-model="data.type.breed.breedid" placeholder="品种类型" style="width: 230px">
							<el-option v-for="item in data.breed" :label="item.breedname" :value="item.breedid"/>
						</el-select>
					</el-form-item>
					<el-form-item label="类型编号:" prop="typesn">
						<el-input v-model="data.type.typesn" placeholder="顺序" :prefix-icon="Cellphone" style="width: 14.2rem;"></el-input>
					</el-form-item>
					<el-form-item label="数量:" prop="tnum">
						<el-input v-model="data.type.tnum" placeholder="数量" :prefix-icon="Cellphone" style="width: 16rem;"></el-input>
					</el-form-item>
					
					<el-form-item label="头像:" prop="pic" style="width: 30rem;">
						<el-upload class="avatar-uploader" :auto-upload="false" list-type="picture" :show-file-list="true"
							 :limit="1" :on-change="onChangeFile" :on-remove="onRemoveFile">
							<img v-if="imgUrl" :src="imgUrl" class="avatar" style="width: 53%;height: 53%;" />
								<el-icon v-else class="avatar-uploader-icon" >
									<h4 style="text-align: center;">点击上传头像</h4>
								</el-icon>
						</el-upload>
						
					</el-form-item>
					
				</el-form>
				<el-button  @click="add()" style="background-color: #E1337F;  margin-left: 6rem;color: #FFFFFF;">{{data.a}}</el-button>
				</div>
			</el-main>
			</div>
			</div>
		</div>
	</el-card>
	
	
	
	
	</div>
	
</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../../../router/index.js"
		import store from "../../../store/index.js"
		import {Search,ShoppingCart,Plus,EditPen} from '@element-plus/icons-vue'
		import bottom from "../../../components/bottom.vue"
		import {useRoute} from "vue-router"
		import {success,warning,message,errors} from '../../../store/alert.js'
		const route =useRoute()
		const imgUrl = ref(''); //定义单个响应式变量
		const ford = new FormData();
		const data=reactive({
				type:{typeid:0,typename:"",breed:{breedid:""},typesn:"",tnum:0},
				a:"添加类型",
				breed:[]
			})
		function gotype(){
			
			router.push("/mer/mertype")
			
		}
		function onChangeFile(file, fileList) {
			console.log("onChangeFile....")
			console.log(fileList) //打印出数组
			const maxSize = 500 * 1024; // 500kb
			if (file.size > maxSize) {
			  errors('文件大小不能超过 500kb');
			  return;
			}
			if (fileList.length > 0) {
				console.log(fileList[0]);
				// fileList[0].raw;  就是文件内容
				imgUrl.value = URL.createObjectURL(fileList[0].raw)
				// fd.append("img", fileList[0].raw)
				console.log(fileList[0].raw)
				ford.append("img", fileList[0].raw)
			}
		}
		function onRemoveFile(file, fileList) {
			imgUrl.value=""
			
			
			}
			
			function add(){
				if(data.type.typename==""||data.type.typesn==""||data.type.breed.breedid==""){
					errors(data.a+"信息不允许为空")
					return
				}
				ford.append("typeid",data.type.typeid)
				ford.append("typename",data.type.typename)
				ford.append("breed.breedid",data.type.breed.breedid)
				ford.append("typesn",data.type.typesn)
				ford.append("tnum",data.type.tnum)
				let s="/mer/type/add"
				if(data.type.typeid!=0)s="/mer/type/update"
				$postf(s,ford).then((read)=>{
					success(read.data.msg)
					router.push("/mer/mertype")
				})
			}
			
		onMounted(()=>{
			let breedid=route.query.breedid
			let typeid =route.query.typeid
			if(breedid!=undefined){
				data.type.breedid=breedid
				$get("/mer/type/findByBreed").then((read)=>{
					data.breed=read.data.data
				})
				
			}else if(typeid!=undefined){
				data.a="更改类型"
				$get("/mer/type/findById/"+typeid).then((read)=>{
					data.breed=read.data.data.breed
					data.type=read.data.data.type
				})
			}
			
			
		})
</script>

<style>
</style>
